<template>
  <nav-bar />

  <ul class="nav">
    <li v-for="(item, index) in nav" :key="index" class="nav-item">
      <img :src="item.backgroundImage" alt="" />

      <van-count-down :time="formateTime(item.countdown)" class="countdown" v-if="item.countdown">
        <template #default="timeData">
          <span class="block">{{ timeData.hours.toString().padStart(2, '0') }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes.toString().padStart(2, '0') }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds.toString().padStart(2, '0') }}</span>
        </template>
      </van-count-down>
      <p class="title">{{ item.title }}</p>
    </li>
  </ul>

  <img :src="youLike" alt="" class="banner" />

  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <ul class="like">
      <li v-for="like in likes" :key="like.iid" class="like-item">
        <img :src="like.img" alt="" class="cover" />
        <div class="title">{{ like.title }}</div>
        <div class="price-collect">
          <div class="price">￥{{ like.price }}</div>
          <div class="collect">
            <van-icon name="star-o" />
            {{ like.cfav }}
          </div>
        </div>
        <van-button type="primary" class="buy" size="small" @click="gotoDetail(like.iid)"
          >立即购买</van-button
        >
      </li>
    </ul>
  </van-list>

  <tab-bar />
</template>

<script setup>
import youLike from '@/assets/GuessYouLike.png'
import { getShopNav, getGuessYouLike } from '@/api/index.js'
import NavBar from '@/components/common/NavBar.vue'
import TabBar from '@/components/common/TabBar.vue'
import { ref, onMounted } from 'vue'

import { useRouter } from 'vue-router'
const router = useRouter()

// const time = ref(18 * 1000 * 1000);

const loading = ref(false)
const finished = ref(false)

const page = ref(1)
const likes = ref([])

const formateTime = (time) => {
  return time * 1000
}

const nav = ref([])
onMounted(async () => {
  const res = await getShopNav()
  // console.log("res", res);
  nav.value = res
})

const onLoad = async () => {
  loading.value = true
  const res = await getGuessYouLike(page.value)
  // console.log("res", res);
  if (res.ret === 'SUCCESS') {
    // likes.value = res.data.wall.docs;

    likes.value.push(...res.data.wall.docs)
    loading.value = false
    page.value += 1
  } else {
    finished.value = true
  }
}

// 商品购买详情页
const gotoDetail = (id) => {
  router.push({ name: 'goods-detail', params: { id } })
}
</script>

<style scoped lang="scss">
.nav {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  align-items: center;
  width: 100%;
  background-color: #fff;

  .nav-item {
    width: 25%;
    position: relative;
    padding-top: 10px;

    img {
      width: 100%;
      position: relative;
      z-index: 1;
    }

    .countdown {
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
      z-index: 2;
      text-align: center;
      margin-bottom: 20px;

      .colon {
        display: inline-block;
        margin: 0 4px;
        color: #fff;
      }

      .block {
        display: inline-block;
        width: 16px;
        color: #fff;
        font-size: 10px;
        text-align: center;
        background-color: #000;
      }
    }

    .title {
      position: absolute;
      height: 10px;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
    }
  }

  .nav-item:nth-child(1) {
    padding-left: 10px;
  }
}

.banner {
  width: 100%;
}

.like {
  list-style: none;
  column-count: 2;
  column-gap: 10px;
  box-sizing: border-box;

  .like-item {
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    align-items: center;

    .cover {
      position: relative;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }

    .title {
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      width: 100%;
      overflow: hidden;
      font-size: 13px;
      padding: 0 5px;
      text-align: center;
      box-sizing: border-box;
    }

    .price-collect {
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 5px;
      overflow: hidden;
    }

    .buy {
      width: auto;
      margin: 0 5px;
      box-sizing: border-box;
      overflow: hidden;
      display: block;
      width: 100%;
    }
  }
}
</style>
